import { Table, Switch, Input, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { proList, getCategory } from "../../http/request";
import {
    UserOutlined,
    DownOutlined
} from '@ant-design/icons';
const { Option } = Select;

const { Search } = Input;

//更新状态
const updataStatus = (cheacked, e, text) => {
    // console.log(cheacked, text);

}

const App = () => {
    //用户列表
    const [data, setData] = useState([])
    //搜索列表
    const [searchList, setsearchList] = useState([])
    //分类列表
    const [Category, setCategory] = useState([])
    //模拟生命周期
    useEffect(() => {
        proList().then(res => {
            // console.log(res);
            setData(() => res.data.data)
        })
        getCategory().then(res => {
            // console.log(res.data);
            setCategory(() => res.data.data)
        })
    }, [])
    //点击图标搜索
    const searchPro = (value, e) => {
        // console.log(value == "");

        if (value) {
            setsearchList(() => data.filter((item) => item.brand.includes(value)))
        } else {
            setsearchList(() => data)
        }
    }
    //下拉菜单
    const handleChange = (value) => {
        console.log(value);
        if (value == "全部") {
            setsearchList(() => data)
        } else {
            setsearchList(() => data.filter((item) => item.category.includes(value)))
        }
    }


    //标题
    const columns = [
        {
            title: "序号",
            render: (text, item, index) => <span>{index + 1}</span>
        },
        {
            title: "图片展示",
            dataIndex: "img1",
            render: (text) => <img src={text} style={{ width: "80px", height: "80px" }} />
        },
        {
            title: "名称",
            dataIndex: "proname"
        },
        {
            title: "品牌",
            dataIndex: "brand"
        },
        {
            title: "分类",
            dataIndex: "category"
        },
        {
            title: "原价",
            dataIndex: "originprice"
        },
        {
            title: "折扣",
            dataIndex: "discount"
        },
        {
            title: "销量",
            dataIndex: "sales"
        },
        {
            title: "是否售卖",
            dataIndex: "issale",
            render: (text) => <Switch checked={text} onClick={(cheacked, e) => updataStatus(cheacked, e, text)}></Switch>
        },
        {
            title: "是否秒杀",
            dataIndex: "isseckill",
            render: (text) => <Switch checked={text} onClick={(cheacked, e) => updataStatus(cheacked, e, text)}></Switch>
        },
        {
            title: "是否推荐",
            dataIndex: "isrecommend",
            render: (text) => <Switch checked={text} onClick={(cheacked, e) => updataStatus(cheacked, e, text)}></Switch>
        },
        // {
        //     title: "操作",
        //     render: () => <Button type="primary" danger size="small">delete</Button>
        // }
    ]
    return (
        <div>
            <Select defaultValue="全部" style={{ width: 150, marginRight: 10 }} onChange={handleChange}>
                <Option value="全部">全部</Option>
                {
                    Category.map((item, index) => {
                        return (
                            <Option value={item} key={"rend" + index}>{item}</Option>
                        )
                    })
                }
            </Select>
            <Search placeholder="搜索商品品牌" onSearch={(value, e) => { searchPro(value, e) }} style={{ width: 200, marginBottom: "5px" }} />
            <Table columns={columns} dataSource={(searchList.length != 0 ? searchList : data)} rowKey={render => render.proid} scroll={{
                y: 500,
            }} />
        </div>
    )

}

export default App;